<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据展示</title>
    <link rel="stylesheet" href="css/wodry.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div id="app" class="main">
    <div class="header">
        <div class="header-left fl">{{nowTime}}</div>
        <div class="header-center fl">
            <div class="header-title">{{title}}</div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>

    </div>

    <div class="center">
        <!-- 左 -->
        <div class="center-left fl">
            <div class="left-top rightTop border">
                <div class="title">基本信息</div>
                <div class="top-list">
                    <p>当你征服一座山峰时，它已经在你脚下了，你必须再找一座山峰去征服，否则，你只有下山，走下坡路了</p>
                    <ul>
                        <li>成交额：{{convertToTenThousand(GroupBasicInformation.Amount)}}元</li>
                        <li>成交量：{{convertToTenThousand(GroupBasicInformation.Quantity)}}吨</li>
                        <li>商品总数：{{GroupBasicInformation.Goodes}}种</li>
                        <li>在线商家：{{GroupBasicInformation.Enterprise}}名</li>
                    </ul>
                </div>
            </div>
            <div class="left-cen rightTop border">
                <div class="title">木耳各省销售量排名</div>
                <ul class="company" id="package">
                    <li v-for="(item,index) in SaleCity" :class="'wodryRX'+index" style="height: 20%;">
                        <span v-for="(ite,i) in item" :key="i">
                            <span v-if="Object.keys(ite).length!=0">{{i!=0?'|':''}}NO.{{ite.Ranking}} {{ite.City}}，木耳累计销售量{{parseInt(ite.Quantity)}}吨</span>
                            <span v-else>|</span>
                        </span>
                        <br/>
                    </li>
                </ul>
            </div>
            <div class="left-bottom rightTop border">
                <div class="title">木耳各省采购量排名</div>
                <ul class="company" id="package">
                    <li v-for="(item,index) in ProcureCity" :class="'wodryRX'+index" style="height: 20%;">
                        <div v-for="(ite,i) in item" :key="i" class="fontInner">
                            <span v-if="Object.keys(ite).length!=0">{{i!=0?'|':''}}NO.{{ite.Ranking}} {{ite.City}}，木耳累计采购量{{parseInt(ite.Quantity)}}吨</span>
                            <span v-else>|</span>
                        </div>
                        <br/>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 中 -->
        <div class="center-cen fl">
            <div class="cen-top rightTop border">
                <div class="top-title">
                    <ul>
                        <li>
                            <p>数量统计</p>
                            <span>3</span>
                            <span>6</span>
                            <span>5</span>
                            <b>吨</b>
                        </li>
                        <li>
                            <p>同比上升</p>
                            <span>1</span>
                            <span>3</span>
                            <b>%</b>
                        </li>
                    </ul>
                </div>
                <div class="top-bottom">
                    <div id="map" class="allnav" style="height: 4.4rem"></div>
                </div>
            </div>
            <div class="cen-bottom rightTop border">
                <div class="title">本年度木耳销量统计</div>
                <div class="bottom-b">
                    <div id="chart4" class="allnav"></div>
                </div>

            </div>
        </div>
        <!-- 右 -->
        <div class="center-right fr">
            <div class="right-top rightTop border">
                <div class="title">木耳销售额排行</div>

                <div class="echart wenzi">
                    <div class="gun">
                    <span>排名</span>
                    <span>类别</span>
                    <span>销售额</span>
                </div>
                    <div id="FontScroll" class="myscroll">
                        <ul>
                            <li v-for="(item,index) in Category" :key="index">
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>{{index+1}}</b>
                                    </span>
                                    <span class="c">{{item.Category_Name}}</span>
                                    <span class="c">{{thousands(item.Amount)}}元</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 渠道占比 -->
            <div class="right-cen border">
                <div class="title">木耳各渠道销量占比</div>
                <div class="right-cen-cent">
                    <div id="chart2" class="allnav"></div>
                </div>

            </div>
            <div class="right-bottom rightTop border">
                <div class="title">木耳类别占比</div>
                <div class="chat">
                    <div id="chart3" class="allnav"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/wodry.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/fontscroll.js"></script>
<script src="js/geoCoordMap.js"></script>
<script src="../../../js/utils.js"></script>
<script src="js/index.js"></script>
<script src="js/china.js"></script>
</body>
</html>